<template>
    <view class="container">
        <header-bar :config="config"></header-bar>
        <view class="page-main">
            <view class="main">
                <view class="custom-cell">
                    <text class="cell-label">收货人</text>
                    <view class="cell-main"
                        ><input class="cell-input" type="text" v-model="data.RealName" placeholder="请填写收货人"
                    /></view>
                </view>
                <view class="custom-cell">
                    <text class="cell-label">联系电话</text>
                    <view class="cell-main">
                        <input
                            class="cell-input"
                            type="number"
                            maxlength="11"
                            v-model="data.ContactTel"
                            placeholder="请填写联系电话" />
                    </view>
                </view>
                <view class="custom-cell">
                    <text class="cell-label">收货地址</text>
                    <view class="cell-main" @click="areaSelectFn">
                        <text class="cell-value">{{ regionName }}</text>
                        <uni-icons type="arrowright"></uni-icons>
                    </view>
                </view>
                <view class="custom-cell">
                    <textarea
                        class="cell-textarea"
                        placeholder="请填写详细地址(街道、楼牌号等)"
                        v-model="data.ContactAddress"></textarea>
                    <uni-icons
                        class="icon-location"
                        type="location-filled"
                        size="48"
                        @click="getLoaction"
                        v-if="false"></uni-icons>
                </view>
            </view>
            <view class="action-bar">
                <text class="btn btn-success" @click="save">保存地址</text>
            </view>
        </view>

        <uni-popup ref="pick" type="dialog">
            <uni-popup-dialog
                type="text"
                title="温馨提示"
                content="确定删除该地址?"
                :before-close="true"
                @close="close"
                @confirm="doDel"></uni-popup-dialog>
        </uni-popup>
        <uni-popup ref="areaSelect" type="bottom" background-color="#fff" :safe-area="false">
            <area-select :address-data="data" @pickArea="pickArea"></area-select>
        </uni-popup>
    </view>
</template>

<script>
import { GetGuideStoreDetail } from "@/service/api/store.js"
import areaSelect from "@/uni-sub-base/components/area-select/area-select.vue"
import inputCell from "@/components/common/cell/input-cell.vue"

import { UpdateUserAddress } from "@/service/api/user.js"

import { getLocation } from "@/uni-sub-base/utils/mapUtil.js"
export default {
    components: {
        inputCell,
        areaSelect,
    },
    data() {
        return {
            config: {
                title: "收货地址",
                centerSlot: true,
            },
            placeholderText: "搜索已有地址",
            searchKey: "",
            data: {
                AddressName: "",
                ContactName: "",
                ContactTel: "",
                ContactAddress: "",
                IsDefault: false,
                ProvinceId: 0,
                ProvinceName: "",
                CityId: 0,
                CityName: "",
                AreaId: 0,
                AreaName: "",
                StreetId: 0,
                StreetName: "",
                ZipCode: null,
            },
            StoreId: "",
            StoreUserId: "",
            regionName: "请选择省、市、区",
        }
    },
    onLoad(e) {
        this.StoreId = e.StoreId
        this.StoreUserId = e.StoreUserId
    },
    mounted() {
        this.getGuideStoreDetail()
    },
    methods: {
        getGuideStoreDetail() {
            let param = {
                storeId: this.StoreId,
            }
            GetGuideStoreDetail(param).then((res) => {
                if (res.State == 1) {
                    this.data = res.Data
                    this.getRegionName()
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        //保存
        save() {
            //必填值校验
            if (this.data.ContactName.trim() == "") {
                this.easyToast("请填写收货人")
                return
            }
            if (this.data.ContactTel.trim() == "") {
                this.easyToast("请填写联系电话")
                return
            }
            if (this.data.ContactTel.length < 11) {
                this.easyToast("请正确填写联系电话")
                return
            }
            if (this.data.ContactAddress.trim() == "") {
                this.easyToast("请填写详细地址")
                return
            }
            let path = "?storeUserId=" + this.StoreUserId
            UpdateUserAddress(this.data, path).then((res) => {
                if (res.State == 1) {
                    this.easyToast("提交成功")
                    setTimeout(() => {
                        this.easyGoBack()
                    }, 500)
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        //删除
        del() {
            this.$refs.pick.open()
        },
        //取消
        close() {
            this.$refs.pick.close()
        },
        //确认删除
        doDel() {
            this.close()
            let param = {
                ids: this.data.ID,
            }
            userAddressDelete(param).then((res) => {
                if (res.State == 1) {
                    this.easyToast("删除成功")
                    setTimeout(() => {
                        this.easyGoBack()
                    }, 500)
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        //选择地区
        areaSelectFn() {
            this.$refs.areaSelect.open()
        },
        //选择地区回调
        pickArea(data) {
            this.$refs.areaSelect.close()
            this.data = Object.assign(this.data, data)
            this.getRegionName()
        },
        getRegionName() {
            let line = "-"
            this.regionName = `${this.data.ProvinceName || ""}-${this.data.CityName || ""}${
                this.data.AreaName ? line + this.data.AreaName : ""
            }${this.data.StreetName ? line + this.data.StreetName : ""}`
            // this.data.ProvinceName?this.data.ProvinceName:'' +
            // this.data.CityName?"-"+this.data.CityName:''+
            // this.data.AreaName?"-"+this.data.AreaName:''+
            // this.data.StreetName?"-"+this.data.StreetName:''
        },
        getLoaction() {
            getLocation().then((res) => {
                if (res) {
                    let address = res.regeocodeData.addressComponent.streetNumber
                    this.data.ContactAddress = address.street + address.number
                }
            })
        },
    },
}
</script>

<style lang="scss">
.page-main {
    padding: $app-page-padding;
}

.main {
    margin-bottom: 40rpx;
    background: $color-white;
    border-radius: $border-radius-10;
}

.action-bar {
    display: flex;
    flex-direction: column;

    .btn {
        height: 80rpx;
        margin-left: 0;
        margin-bottom: 20rpx;
    }
}

.custom-cell {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-height: 66rpx;
    padding: $app-page-padding;
    border-bottom: solid 1rpx $uni-bg-color-grey;

    &:last-child {
        border-bottom: 0;
    }

    .cell-label {
        display: flex;
        flex: 1;
    }

    .cell-main {
        display: flex;
        flex: 3;
        overflow: hidden;

        .cell-value {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: $app-color-text-desc;
            font-size: $font-size-28;
        }
        .cell-input {
            color: $app-color-text-desc;
            font-size: $font-size-28;
        }
    }

    .cell-textarea {
        height: 160rpx;
        color: $app-color-text-desc;
        font-size: $font-size-28;
    }
    .icon-location {
        padding: $app-page-padding;
        margin-right: -$app-page-padding;
    }
}

.card-cell {
    margin-bottom: 40rpx;
}

.cell-switch {
    transform: scale(0.8);
}
</style>
